<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { throttle } from 'lodash-es'

const route = useRoute()

const innerHeight = ref(window.innerHeight)

const getInnerHeight = () => {
  innerHeight.value = `${window.innerHeight - 120}px`
}
getInnerHeight()
window.addEventListener('resize', throttle(getInnerHeight, 200))
</script>

<template>
  <el-main :style="{ height: innerHeight }">
    <router-view v-slot="{ Component }">
      <el-scrollbar :max-height="innerHeight">
        <component
          :is="Component"
          :key="route.name"
        />
      </el-scrollbar>
    </router-view>
  </el-main>
</template>
